
<template>
  <div class="content">
    
    <van-skeleton
      title
      :row="3"
      :loading="loading"
    >
      <div class="progress-wrap">  
        <div class="clearfix header">
          <div class="fl">
            <p>号牌号码：{{carInfo.carNum}}</p>
            <p>提交时间：{{carInfo.dates}}</p>
          </div>
          <div class="fr" v-if="!carInfo.orderType">
            <div class="time" v-if="timeShow">
              <p>预约检测剩余：</p>
              <van-count-down :time="time">
                <template v-slot="timeData">
                  <span class="list">{{ timeData.days }}天</span>
                  <span class="list">{{ timeData.hours }}时</span>
                  <span class="list">{{ timeData.minutes }}分</span>
                  <span class="list">{{ timeData.seconds }}秒</span>
                </template>
              </van-count-down>
            </div>
            <div class="modify" v-if="modify" @click="modifyClick">修改预约日期</div>
          </div>
        </div>
        <div class="box">
          <!-- <div class="steps-box">
            <div
              v-for="(item,index) in list"
              :key="item.updateTime"
              class="steps"
              :class="{lastChild:index === list.length-1}"
            >
              <div v-if="item.status === 1">
                <div class="time">
                  <span>{{item.updateTime}}</span>
                </div>
                <div class="text">
                  <span>{{item.name}}</span>
                </div>
              </div>
            </div>
          </div> -->
          <div class="steps">
            <div class="item" v-for="(item,index) in list" :key="index">
              <span class="time" v-if="item.status === 1">{{item.updateTime | dateStyle}}</span>
              <span class="num" v-if="item.status === 1" :class="item.status === 1?'active':''">{{index+1}}</span>
              <span class="name" v-if="item.status === 1">{{item.name}}</span>
            </div>
          </div>
        </div>
        <div class="btn" v-if="carInfo.commentStatus !=1">
          <button  @click="btnClick">服务评价</button>
        </div>
      </div>
    </van-skeleton>
    <foot :navUrl="url"/>
  </div>
</template>

<script>
import { getDate } from '@/utils/index'
import foot from '@/views/footer.vue'
export default {
  name: 'progress',
  data() {
    return {
      list: [],
      time:null,
      carInfo: {},
      active:0,
      loading:true,
      modify:true,
      timeShow:true,
      url:'/order'
    }
  },
  created() {
    if (!this.$route.params.carInfo) {
      this.$router.go(-1)
    } else {
      this.carInfo = this.$route.params.carInfo
      this.carInfo.dates = getDate(this.carInfo.updateTime).o
      console.log(this.$route.params.carInfo)
      this.queryOrderStep(this.carInfo.id)
    }
  },
  mounted() {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#f5f6f5'
  },
  methods: {
    // 车检进度查询
    async queryOrderStep(ids) {
      let { data } = await this.$api.queryOrderStep({ orderId: ids })
      let carTime = data.date
      if(carTime){
        this.time =new Date(carTime.replace(/-/g,'/'))-new Date()
        if (this.time<(12*60*60*1000) || this.carInfo.type == 3) {
          this.modify = false
        }
        if(this.time<=0 || this.carInfo.type == 3){
          this.timeShow = false
        }
      }else{
        this.modify = false
        this.timeShow = false
      }
      this.list = data.list
      data.list.forEach((el,index) => {
        if (el.status == 1) {
          this.active = index
        }
      })
      this.loading = false
      console.log(data, '------------------- 车检进度查询 ----------------')
    },
    //点击修改日期
    modifyClick(){
      this.carInfo.type = 2
      this.$router.push({
        name: 'makeAnAppointment',
        params: {
          carInfo: this.carInfo
        }
      })
    },
    /* getDates(time, str) {
      Date.prototype.Format = function(fmt) {
        // author: meizz
        var o = {
          'M+': this.getMonth() + 1, // 月份
          'd+': this.getDate(), // 日
          'h+': this.getHours(), // 小时
          'm+': this.getMinutes(), // 分
          's+': this.getSeconds(), // 秒
          'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
          S: this.getMilliseconds() // 毫秒
        }
        if (/(y+)/.test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            (this.getFullYear() + '').substr(4 - RegExp.$1.length)
          )
        for (var k in o)
          if (new RegExp('(' + k + ')').test(fmt))
            fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length == 1
                ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length)
            )
        return fmt
      }

      let date = new Date(time).Format(str)

      return date
    }, */
    //点击服务评价
    btnClick(){
      this.$router.push({
        name: 'serviceRating',
        params: {
            carInfo:this.carInfo
        }
      })             
    }
  },
  beforeRouteLeave(to, from, next) {
    document.getElementsByTagName('html')[0].style.backgroundColor = '#fff'
    next()
  },
  components:{
    foot
  },
  filters:{
    dateStyle(v){
      let date = new Date(v)
      let Y = date.getFullYear()
      let M = date.getMonth()+1
      let D = date.getDate()
      let h = date.getHours()
      let m = date.getMinutes()
      let s = date.getSeconds()
      if (h<10) {
        h = '0'+h
      }
      if (m<10) {
        m = '0'+m
      }
      if (s<10) {
        s = '0'+s
      }
      if (M<10) {
        M = '0'+M
      }
      if (D<10) {
        D = '0'+D
      }
      let value = Y+'-'+M+'-'+D+' '+h+':'+m+':'+s
      return value
    }
  }
}
</script>

<style lang="less" scoped>
.progress-wrap {
  counter-reset: step; /*创建步骤数字计数器*/
  .header {
    width: 96%;
    height: 2.8rem;
    background: linear-gradient(to right, #fd7d10, #fda158);
    border-radius: 0.32rem;
    margin: 0.187rem auto 0;
    .fl {
      font-size: 0.427rem;
      color: #fff;
      line-height: 0.72rem;
      padding-left: 0.307rem;
      padding-top: 0.25rem;
      p{
        line-height: 1rem;
      }
    }
    .fr {
      width: 3.4rem;
      border-radius: 0.187rem;
      margin-top: 0.28rem;
      margin-right: 0.307rem;
      .time{
        height: 1.2rem;
        border: 0.027rem solid #fff;
        text-align: center;
        p {
          line-height: 0.587rem;
          font-size: 0.4rem;
          color: #fff;
          text-align: center;
        }
        .list{
          font-size: 0.35rem;
          color:#fff;
          
        }
      }
      .modify{
        line-height:0.6rem;
        border: 1px solid #fff;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        border-radius: 0.3rem;
        text-align: center;
        margin-top: 0.35rem;
      }
      
    }
  }
  .btn {
    width: 100%;
    margin-bottom: 2rem;
    //position: absolute;
    //bottom: 8%;
  }
  button {
    width: 90%;
    height: 1.067rem;
    line-height: 1.067rem;
    text-align: center;
    font-size: 0.56rem;
    color: #fff;
    margin: 0 auto;
    display: block;
    border: 0;
    background-color: #27b5a7;
  }
  .box {
    width: 100%;
    //height: 63%;
    /* position: absolute;
    top: 4.4rem;
    left: 0; */
    overflow: hidden;
  }
  .steps-box {
    width: 96%;
    height: 100%;
    margin: 0 auto;
    padding: 0.8rem 0;
    background-color: #faf6f5;
    border-radius: 0.32rem;
    .steps {
      position: relative;
      margin-bottom: 0.747rem;

      .time {
        width: 20%;
        height: 0.6rem;
        line-height: 0.6rem;
        span {
          display: block;
          font-size: 0.427rem;
          text-align: center;
          color: #9d9c9a;
          height: 0.6rem;
          line-height: 0.6rem;
        }
      }
      /*步骤描述*/
      .text {
        list-style-type: none;
        text-align: center;
        width: 100%;
        height: 0.6rem;
        line-height: 0.6rem;
        position: absolute;
        top: 0;
        left: 20%;
        span {
          position: absolute;
          top: 0;
          left: 10%;
          font-size: 0.453rem;
        }
      }
      /*步骤数字*/
      .text:before {
        display: block;
        content: counter(step); /*设定计数器内容*/
        counter-increment: step; /*计数器值递增*/
        width: 0.6rem;
        height: 0.6rem;
        background-color: #fd4b05;
        line-height: 0.6rem;
        border-radius: 0.6rem;
        font-size: 0.32rem;
        color: #fff;
        text-align: center;
        font-weight: 700;
      }
      /*连接线*/
      .text:after {
        content: '';
        width: 2px;
        height: 140%;
        background-color: #fd4b05;
        position: absolute;
        left: 0.267rem;
        top: 0.6rem;
        z-index: -1; /*放置在数字后面*/
      }
    }

    .lastChild .text::after {
      display: none;
    }
  }

  // /*将当前/完成步骤之前的数字及连接线变绿*/
  // .steps .text.active:before,
  // .steps .text.active:after {
  //   background-color: #fd4b05;
  // }

  // /*将当前/完成步骤之后的数字及连接线变灰*/
  // .steps .text.active ~ .text:before,
  // .steps .text.active ~ .text:after {
  //   background-color: #777;
  // }
}
.steps{
  font-size: 0.4rem;
  text-align: center;
  background-color: #fff;
  padding: 0.8rem;
  .item{
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
  }
  .time,.name{
    display: block;
    height: 0.5rem;
    line-height: 0.5rem;
  }
  .name{
    margin-top: 0.05rem;
  }
  .time{
    color:#ccc;
  }
  .num{
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #999;
    display: block;
    text-align: center;
    line-height: 0.5rem;
    color:#fff;
    margin:0rem 0.3rem;
    
  }
  .active{
    background-color: #fd4b05;
    position: relative;
  }
  .active:after{
    content: '';
    width: 2px;
    height: 1.05rem;
    background-color:#fd4b05;
    position: absolute;
    left: 0.248rem;
    top:-1.05rem;
  }
  .item:first-child{
    .active::after{
      content: '';
      width: 0;
      height: 0;
      
    }
  }
  
}
</style>